<template>
    <div
        class="format-select-box"
        v-show="formatShow"
        @click.prevent.self="closeFormatSelect"
    >
        <div class="format-select-main">
            <div class="goods-info-box">
                <div class="goods-img-box">
                    <img
                        class="goods-img"
                        :src="formatImg"
                    />
                </div>
                <div class="goods-info">
                    <div class="goods-price">￥{{goodsInfo.price_0 | currency}}</div>
                    <div
                        class="goods-format-info"
                        v-if="formatNow.length>0"
                    >
                        <div
                            v-for="(item,index) of formatNow"
                            :key="index"
                        >
                            <span v-if="index>0">，</span>
                            <span>{{item}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goods-format-box">
                <div
                    class="goods-format-type"
                    v-for="(items,indexs) of formatList"
                    :key="indexs"
                >
                    <div class="goods-format-title">{{items.name}}</div>
                    <div class="goods-format-list">
                        <div
                            class="goods-format-item"
                            v-for="(item,index) of items.value_list"
                            :key="index"
                            :class="[item.selected == 1?'selected':'',item.enable == 1?'':'unselected']"
                            @click="formatSelect(item.id,indexs,item.enable)"
                        >{{item.name}}</div>
                    </div>
                </div>
            </div>
            <div class="goods-num-box">
                <div class="goods-num-title">数量</div>
                <div class="goods-num-input">
                    <div
                        class="minus"
                        @click="minus"
                    ></div>
                    <input
                        class="num-input"
                        type="tel"
                        v-model="goodsNum"
                        disabled
                    />
                    <div
                        class="add"
                        @click="add"
                    ></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'FormatSelect',
    props: [
        'formatShow',
        'formatImg',
        'goodsInfo',
        'formatNow',
        'formatList',
        'goodsNum'
    ],
    methods: {
        formatSelect(value, type, bool) {
            this.$emit('formatSelect', { value, type, bool })
        },
        minus() {
            this.$emit('minus')
        },
        add() {
            this.$emit('add')
        },
        closeFormatSelect() {
            this.$emit('closeFormatSelect')
        }
    },
    filters: {
        currency(value) {
            return parseFloat(value / 100).toFixed(2)
        }
    }
}
</script>

<style lang="stylus" scoped>
.format-select-box
    position absolute
    top 0
    left 0
    right 0
    bottom 1.31rem
    background-color rgba(0, 0, 0, 0.7)
    z-index 5
    .format-select-main
        position absolute
        bottom 0
        left 0
        right 0
        padding 0.45rem 0.45rem 1.33rem 0.45rem
        background #fff
        border-radius 10px 10px 0 0
        max-height 10rem
        overflow-y scroll
        .goods-info-box
            display flex
            align-items flex-end
            .goods-img-box
                width 2.24rem
                height 2.24rem
                overflow hidden
                img
                    width 100%
                    height 100%
            .goods-info
                margin-left 0.26rem
                flex 1
                .goods-price
                    font-size 0.5rem
                    color #e7463c
                .goods-format-info
                    display flex
                    margin-top 0.37rem
                    font-size 0.37rem
                    color #323232
        .goods-format-type
            margin-top 0.64rem
            .goods-format-title
                font-size 0.42rem
                color #131313
            .goods-format-list
                display flex
                flex-wrap wrap
                margin-top 0.26rem
                .goods-format-item
                    padding 0.2rem 0.4rem
                    font-size 0.34rem
                    color #131313
                    line-height 1
                    background #f6f5f5
                    border-radius 2px
                    border 1px solid #f6f5f5
                    margin-right 0.26rem
                    margin-bottom 0.26rem
                .selected
                    border-color #d7463c
                    color #d7463c
                .unselected
                    color #999
                    text-decoration line-through
        .goods-num-box
            display flex
            align-items center
            justify-content space-between
            margin-top 0.64rem
            .goods-num-title
                font-size 0.42rem
                color #131313
            .goods-num-input
                display flex
                align-items center
                width 3.2rem
                background #e5e5e5
                border-radius 2px
                .minus
                    width 1rem
                    height 0.74rem
                    background-image url('../../../assets/images/goodsDetail/minus-icon.png')
                    background-size 0.24rem 0.05rem
                    background-repeat no-repeat
                    background-position center
                .add
                    width 1rem
                    height 0.74rem
                    background-image url('../../../assets/images/goodsDetail/add-icon.png')
                    background-size 0.24rem 0.24rem
                    background-repeat no-repeat
                    background-position center
                .num-input
                    flex 1
                    min-width 1px
                    height 0.74rem
                    line-height 0.74rem
                    font-size 0.42rem
                    color #131313
                    text-align center
                    background #f1f1f1
</style>

